<template>
  <div>
    <el-dialog title="裸升套餐：" :visible="showDialog" width="35%" :show-close="false" class="dialog">
      <verification-code
        :label="selectSetMeal && selectSetMeal.label ? selectSetMeal.label:''"
        :onGetCode="handleGetValidateCode"
        :onSubmitResult="handleSubmit"
        :oncancel="handleCancel"
      >
      </verification-code>
    </el-dialog>
    <div class="collapses">
      <el-collapse class="collapse" v-model="collapseValue">
        <el-collapse-item :name="collapseAreaName">
          <template slot="title">
            <el-button type="text" style="padding-left: 10px;">城市</el-button>
          </template>
          <el-card class="box-card">
            <el-row v-for="(row, index_row) in processedCityButton" :key="index_row" :gutter="24" class="header-row">
              <el-col v-for="(item, index_col) in row" :key ="index_col" :span="3">
                <el-button type="primary" size="small" plain>{{item}}</el-button>
              </el-col>
            </el-row>
          </el-card>
        </el-collapse-item>
        <el-collapse-item :name="collapseSetMealName">
          <template slot="title">
            <el-button type="text" style="padding-left: 10px;">套餐</el-button>
          </template>
          <el-card class="box-card">
            <el-row v-for="(row, index_row) in processedSetMealButton" :key="index_row" :gutter="24" class="header-row">
              <el-col v-for="(item, index_col) in row" :key ="index_col" :span="8">
                <el-button type="primary" plain class="setMealButton" @click="handleClickSetMeal($event, item)">{{item.label}}</el-button>
              </el-col>
            </el-row>
          </el-card>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div style="text-align: center;">
      <el-button type="primary" class="submit" @click="handleBusiness">立刻办理</el-button>
    </div>
  </div>
</template>
<script>
import verificationCode from '../components/verificationCode.vue'
import api from '@/api/modular/main/businessHandling.js'
export default {
  components: { verificationCode },
  data () {
    return {
      collapseSetMealName: 'SetMeal',
      collapseAreaName: 'Area',
      collapseValue: ['SetMeal', 'Area'],
      formdata: {
        jsoncallback: 'jQuery331023803767891572547_1644542543898',
        validateCode: '',
        merchantCode: 'ECOP_ZNZD',
        mobile: '',
        inputCode: '',
        jNumber: 'pBP4DipyBJNxDAfRuG9xBw%3D%3D',
        ssNumber: '',
        payType: '',
        transtype: '2',
        longitude: '',
        latitude: '',
        outerStr: '',
        ultype: '',
        timestanp: ''
      },
      clock: 0,
      selectSetMeal: null,
      processedSetMealButton: [],
      processedCityButton: [],
      cityButtons: [
        '广州'
      ],
      setMeals: [
        {
          label: '39元优享套餐',
          code: '39元优享套餐'
        },
        {
          label: '59元优享套餐（升级版）',
          code: '5GYXSJB59'
        },
        {
          label: '89元畅享套餐（升级版）',
          code: 'CXTC89SJB'
        },
        {
          label: ' 119元全家享套餐',
          code: 'prod.10086000030184'
        },
        {
          label: ' 139元5G全家享套餐',
          code: '5GCXTC139'
        },
        {
          label: ' 239元5G全家享套餐',
          code: '5GCXTC239'
        },
        {
          label: '289元5G全家享套餐',
          code: '5GCXTC289'
        },
        {
          label: '389元5G全家享套餐',
          code: '5GCXTC389'
        },
        {
          label: '589元5G畅享套餐',
          code: '5GCXTC589'
        },
        {
          label: '199元5G全家享套餐',
          code: '5GCXTC199'
        }
      ],
      showDialog: false,
      rules: {
        validateCode: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ]
      }
    }
  },

  mounted() {
    this.processeCityButton()
    this.processeSetMealButton()
  },

  methods: {
    processeSetMealButton() {
      let count = 0
      let row = []
      this.setMeals.forEach(item => {
        if (count === 3) {
          count = 0
          this.processedSetMealButton.push(row)
          row = []
        }
        row.push(item)
        count = count + 1
      })
      if (row.length !== 0) {
        this.processedSetMealButton.push(row)
      }
    },
    processeCityButton() {
      let count = 0
      let row = []
      this.cityButtons.forEach(item => {
        if (count === 8) {
          count = 0
          this.processedCityButton.push(row)
          row = []
        }
        row.push(item)
        count = count + 1
      })
      if (row.length !== 0) {
        this.processedCityButton.push(row)
      }
    },
    handleClickSetMeal(event, item) {
      this.selectSetMeal = item
    },
    handleBusiness() {
      if (!this.selectSetMeal) {
        this.$message.error('请选择套餐!')
      } else {
        this.showDialog = true
      }
    },
    handleSubmit(mobile, validateCode) {
      this.$refs.form.validate((valid) => {
        if (!valid) {
          this.$message.error('请完整填写信息!')
        } else {
          const param = {
            area: '广州',
            code: this.selectSetMeal.code,
            phone: mobile,
            validateCode: validateCode,
            name: this.selectSetMeal.label
          }
          api.submitSetMeal(param).then(res => {
            console.log(res)
            if (!res || res.retcode === undefined || res.retcode === null) {
              this.$message.error('办理套餐失败!')
            } else if (res.retcode !== 0) {
              if (res.remindWord && res.remindWord !== '' && !res.remindWord.indexOf('^')) {
                this.$message.error(res.remindWord)
              } else if (res.retmsg && res.retmsg !== '') {
                this.$message.error(res.retmsg)
              } else if (res.guideWord && res.guideWord !== '') {
                this.$message.error(res.guideWord)
              }
            } else {
              this.$message.success('办理套餐成功!')
              console.log('成功返回结果', res)
            }
          })
        }
      })
    },
    handleCancel() {
      this.showDialog = false
    },
    handleGetValidateCode(mobile) {
      const data = {
        mobile: mobile,
        commCode: this.selectSetMeal.code,
        merchantCode: 'ECOP_ZNZD',
        jNumber: 'pBP4DipyBJNxDAfRuG9xBw%3D%3D',
        transType: '2'
      }
      const param = {
        params: [],
        values: []
      }
      for (const key in data) {
        param.params.push(key)
        param.values.push(data[key])
      }
      api.getValidateCode(param).then(res => {
        console.log(res)
        if (!res || res.retcode === undefined || res.retcode === null) {
          this.$message.error('获取验证码失败!')
        } else if (res.retcode !== 0) {
          this.$message.error(res.retmsg)
        } else {
          this.$message.success(res.retmsg)
        }
      }).catch(err => {
        console.log('获取验证码失败', err)
        this.$message.error('获取验证码失败!')
      })
    }
  }
}

</script>

<style lang="less" scoped>
  .dialog {
    .dialg-setmeal-label {
      text-align: center;
      padding-top: 10px;
      padding-bottom: 10px;
    }
    .dialog-button {
      margin-left: 60%;
    }
  }
  .box-card {
    width: 100%;
    .header-row {
      padding-bottom: 10px;
    }
  }
  .setMealButton {
    width: 100%;
  }
  .collapses {
    .collapse {
      padding-bottom: 10px;
    }
  }
  .submit {
    width: 40%;
  }
</style>
